<template>
    <div>
        <h-section title="产品注册制立项目标" collapse>
            <a-form layout="inline">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="产品名称">
                            <div>{{ lubiaoDetail.catalogName }}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="产品年度目标">
                            <div
                                v-html="lubiaoDetail?.pmpRegisteredProjectDTO?.projectObjective"
                                v-if="lubiaoDetail?.pmpRegisteredProjectDTO?.projectObjective"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="产品主线版本" v-if="lubiaoDetail.id">
                            <div v-if="lubiaoDetail.pmpRegisteredProjectDTO">
                                <span v-if="lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO">
                                    {{ lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.versionNumber }}
                                </span>
                                <div style="color: #db1c0b" v-else>请先至注册制项目一览中关联主线版本！</div>
                            </div>
                            <div style="color: #db1c0b" v-else>请先至注册制项目一览中关联主线版本！</div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </h-section>
        <div style="margin-top: 2px">
            <h-section title="阶段规划信息" collapse>
                <a-form layout="inline">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="阶段时间">
                                <span>{{ annualPlanningObj?.startDate }}</span>
                                <span v-if="annualPlanningObj && annualPlanningObj.startDate">~</span>
                                <span>
                                    {{ annualPlanningObj?.endDate }}
                                </span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="阶段规划">
                                <div v-html="annualPlanningObj?.content" v-if="annualPlanningObj?.content" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const annualPlanningObj = computed(() => {
            const pmpAnnualPlanningDTO = props.lubiaoDetail?.pmpRegisteredProjectDTO?.pmpAnnualPlanningDTO;
            return pmpAnnualPlanningDTO || {};
        });
        return {
            annualPlanningObj
        };
    }
});
</script>

<style scoped>
</style>